<template>
  <i v-if="icon" :class="icon" :style="style" @click="handleClick"></i>
  <svg v-else-if="svg" :class="svgClass" aria-hidden="true" :style="style" @click="handleClick">
    <use :xlink:href="iconName"></use>
  </svg>
</template>
<script>
  import view from './view.js'

  export default {
    name: 'v-icon',
    componentName: 'v-icon',
    mixins: [view],
    props: {
      desc: {
        type: String,
        default: 'v-icon'
      },
      svg: {
        type: String,
        required: ''
      },
      className: {
        type: String
      },
      icon: {
        type: String,
        default: ''
      },
    },
    install: function (Vue) {
      Vue.component('v-icon', this)

    },
    computed: {
      style () {
        let prop = view.getStyle(this.$props)
        console.log(prop)
        return prop
      },
      iconName () {
        return `#icon-${this.svg}`
      },
      svgClass () {
        if (this.className) {
          return 'svg-icon ' + this.className
        } else {
          return 'svg-icon'
        }
      }
    },
    methods: {
      handleClick (evt) {
        this.$emit('click', evt)
      }
    }
  }

</script>
<style scoped>
  .svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>
